<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/shopping.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <header></header>
    <main>
        <div class="center">
            <div class="top">
                <a href="" class="a1">商城首页></a>
                <a href="" class="a2">新品专区></a>
                <a href="" class="a2">明月心手办></a>
                <span>明月心手办</sp>
            </div>
            <div class="shop">
                <div class="left">
                    <div class="bigImg" id="smallbox">
                        <div id="mask"></div>
                    </div>
                    <div id="bigbox"></div>
                    <div class="smallImg">
                        <ul>
                            <li class="click">
                                
                            </li>
                            <li class="click">
                               
                            </li>
                            <li class="click">
                               
                            </li>
                            <li class="click">
                                
                            </li>
                            <li class="click">
                                
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right">
                    <h3 class="goodname"></h3>
                    <div class="price">
                        <span>￥<i class="goodprice"></i></span>
                    </div>
                    <div class="sold">
                        <div class="sold_left">
                            已售：<span>53</span>
                        </div>
                        <div class="sold_middle">
                            累计评价：<span>0</span>
                        </div>
                        <div class="sold_right">
                            <div></div>
                            <span>0.0</span>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="number">
                            <span>数量</span>
                            <div>
                                <a href="#" class="dell">
                                    <i></i>
                                </a>
                                <input type="text" value="1" class="inp">
                                <a href="#" class="addd">
                                    <i></i>
                                </a>
                            </div>
                            <span></span>
                        </div>
                        <div class="addbtn">
                            <a href="#" class="add">加入购物车</a>
                            <a href="">立即购买</a>
                            <a href="">
                                <div></div>
                                <span>收藏</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shop_bottom">
                <div class="connect">
                    <ul>
                        <li>
                            商品详情
                            <div></div>
                        </li>
                        <li>用户点评<span>(0)</span></li>
                        <li>联系商家</li>
                    </ul>
                </div>
                <div class="parameter">
                    <ul>
                        <li>
                            <span>商品名称：</span>
                            <span>明月手心办</span>
                        </li>
                        <li>
                            <span>店铺：</span>
                            <span>2022-8-11</span>
                        </li>
                        <li>
                            <span>商品毛重：</span>
                            <span>50g</span>
                        </li>
                        <li>
                            <span>商城：</span>
                            <span>天涯明月刀</span>
                        </li>
                        <li>
                            <span>周边分类：</span>
                            <span>新品专区/明月手心办</span>
                        </li>
                        <li>
                            <span>商品名称：</span>
                            <span>明月手心办</span>
                        </li>
                    </ul>
                </div>
                <div class="oImg">
                    <p>
                        <img src="img/X1.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X2.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X3.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X4.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X5.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X6.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X7.jpg" alt="">
                    </p>
                    <p>
                        <img src="img/X8.jpg" alt="">
                    </p>
                </div>
            </div>

        </div>
    </main>
    <footer></footer>
</body>

</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/shopping.js"></script>
<script>
    $('header').load('header.html');
    $('footer').load('footer.html');
</script>
